<script>
import {ref, inject, h, defineComponent, provide } from 'vue'
import {NIcon} from 'naive-ui'
import {
  PersonCircleOutline as UserIcon,
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon,
} from '@vicons/ionicons5'
import darkUtile from '@/components/utils/dark-util.vue'
import preferenceUtil from "@/components/utils/preference-util.vue";
import PreferenceUtil from "@/components/utils/preference-util.vue";
import {getUserByUsername, outLogin} from '@/res/api/user_api'

export default defineComponent({
  name: "header-communal",
  components: {PreferenceUtil},
  props:{
    action:{
      redirect:true,
      type:String
    }
  },
  setup(){
    const { toPage } = inject('toPage')
    const { dark } = inject('dark')
    let userImage = ref('')
    getUserByUsername().then(res=> {
      // console.log(res.data.imgUrlIcon)
      userImage.value = res.data.imgUrlIcon
    }).catch(err=> {
      console.log(err)
    })
    function renderIcon(icon) {
      return () => h(NIcon, null, { default: () => h(icon) });
    }
    //模态框设置
    let showModal = ref(false);
    //用户操作设置
    const dropdownOption = [
      {
        label: "用户资料",
        key: "profile",
        icon: renderIcon(UserIcon)
      },
      {
        label: "偏好设置",
        key: "editProfile",
        icon: renderIcon(EditIcon)
      },
      {
        label: "退出登录",
        key: "logout",
        icon: renderIcon(LogoutIcon)
      }
    ]
    function handleSelect(key) {
      if(key===dropdownOption[2].key){
        //退出登录
        outLogin().then((res) => {
          $message.destroyAll()
          $message.success(res.message)
          sessionStorage.clear()   //清除所有session值
          localStorage.clear()     //清除所有localStorage值
          dark()
          window.location.reload()
        })
      }else if(key === dropdownOption[1].key){
        showModal.value=true
      }else {
        toPage('std/userInfo')
      }
    }
    const user={
      name:'liweiwei'
    }
    //关闭模态框操作
    function closeModelClick(close=false){
      console.log(close)
      showModal.value = close
    }
    provide("closeModelClick",{closeModelClick})
    return{
      toPage,darkUtile,
      userImage,
      options: ref(dropdownOption),
      handleSelect,
      showModal,
      users:ref(user),
    }
  }
})

</script>

<template>
  <n-layout-header bordered class="core sc-header">
    <n-grid x-gap="12" cols="6" class="sc-grid">
      <n-gi class="item-auto">
        <n-image
            @click="toPage()"
            preview-disabled
            width="100"
            src="/src/assets/picture/Linter.png"
        />
      </n-gi>
      <n-gi offset="1" class="item-center">
        <p class="nav-title hover-pointer"
           :class="{'nav-title-activate':action==='learn'}"
           @click="toPage('std/learn')">学习中心</p>
      </n-gi>
      <n-gi class="item-center">
        <p class="nav-title hover-pointer"
           :class="{'nav-title-activate':action==='note'}"
           @click="toPage('std/note')">Note笔记</p>
      </n-gi>
      <n-gi class="item-center">
        <p class="nav-title hover-pointer"
           :class="{'nav-title-activate':action==='info'}"
           @click="toPage('std/userInfo')">个人中心</p>
      </n-gi>
      <n-gi class="item-end">
        <n-dropdown :options="options"
                    trigger="click"
                    @select="handleSelect"
                    :show-arrow="true">
          <n-badge dot>
            <n-avatar
                round
                :size="42"
                :src="userImage"
            />
          </n-badge>
        </n-dropdown>
      </n-gi>
    </n-grid>
  </n-layout-header>
<!--  偏好设置弹窗-->
  <n-modal
      v-model:show="showModal"
      transform-origin="center"
  >
    <preference-util/>
  </n-modal>
</template>

<style lang="scss" scoped>
$gi:81px;
.sc-header{
  height: $gi;
  .sc-grid{
    height: $gi;
  }
}
.nav-title{
  //background: yellow;
  width: 10rem;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  transition: 0.21s 0s ease;
  &:hover{
    color: #1296db;
  }
  &:active{
    text-shadow: 2px 2px #f2f2f2;
    color: darken(#1296db,1.2);
  }
  @media screen and (max-width:768px) {
    .nav-title{
      transition: 0.21s 0s ease;
      letter-spacing: 1px;
    }
  }
  @media screen and (min-width:768px) and (max-width:1200px) {
    transition: 0.21s 0s ease;
    letter-spacing: 2px;
  }
  @media screen and (min-width: 1200px){
    transition: 0.21s 0s ease;
    letter-spacing: 5px;
  }
}
.nav-title-activate{
  color: #1296db;
}
.log-title{
  width: 10rem;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 3px;
  text-shadow:2px 3px 1px pink;
}

</style>
